<template>
	<div style="padding: 15px">
		<div
			style="background-color: #fff; padding: 10px; margin-bottom: 15px; font-size: 700; cursor: pointer"
			@click="router.go(-1)"
		>
			<el-icon><ArrowLeftBold /></el-icon><span>返回</span>
		</div>
		<div>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="excel_name" label="名称" width="180" />
				<el-table-column prop="create_time" label="上传时间" width="180" />
				<el-table-column prop="address" label="分配客服">
					<template #default="scope">
						<el-tag v-for="item in scope.row.staff" style="margin: 3px"
							><el-icon><User /></el-icon>{{ item }}</el-tag
						>
					</template>
				</el-table-column>
				<el-table-column prop="address" label="客户标签">
					<template #default="scope">
						<el-tag v-for="item in scope.row.tags" style="margin: 3px">{{ item }}</el-tag>
					</template>
				</el-table-column>

				<el-table-column prop="batch_users" label="导入客户数" />
				<el-table-column prop="add_users" label="已添加客户数" />
				<el-table-column prop="performance" label="添加完成率" />
				<el-table-column prop="address" label="操作">
					<template #default="scope">
						<el-button type="primary" text @click="remind(scope.row)">提醒</el-button>
						<el-button type="primary" text @click="deleteapi(scope.row)">删除</el-button>
						<el-button type="primary" text @click="recorddetails(scope.row)">详情</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div style="height: 70px; padding-top: 15px; background-color: #fff">
			<el-pagination
				v-model:currentPage="form.page"
				v-model:page-size="form.size"
				:page-sizes="[10, 20, 30, 40]"
				:small="small"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				style="float: right"
			/>
		</div>
	</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { userBatchDelHistroy, userBatchDelDelbatch, userBatchDelMissions } from '@/api'
import Detail from '../customer/detail/index.vue'
const Route = useRoute()
const router = useRouter()
const details = ref()
const form = reactive({
	page: 1,
	size: 10
})
const total = ref(0)
const tableData = ref([
	{
		date: '2016-05-03',
		name: 'Tom',
		address: 'No. 189, Grove St, Los Angeles'
	}
])
const recorddetails = (val) => {
	router.push({ path: 'recorddetails', query: { id: val.id } })
}
const userBatchDelHistroyapi = () => {
	userBatchDelHistroy(form).then((res) => {
		tableData.value = res.data.item
		total.value = res.data.count
	})
}
const handleSizeChange = (val) => {
	form.size = val
	userBatchDelHistroyapi()
}
const handleCurrentChange = (val) => {
	form.page = val
	userBatchDelHistroyapi()
}
const deleteapi = (val) => {
	ElMessageBox.confirm('确定要删除该条数据吗？', '提示', {
		type: 'warning',
		center: true
	}).then(() => {
		userBatchDelDelbatch({ id: val.id }).then((res) => {
			ElMessage({
				message: '删除成功',
				type: 'success'
			})
			userBatchDelHistroyapi()
		})
	})
}
const remind = (val) => {
	ElMessageBox.confirm('是否确认提醒员工添加好友？', '提示', {
		type: 'warning',
		center: true
	}).then(() => {
		userBatchDelMissions({ id: val.id }).then((res) => {
			ElMessage({
				message: '提醒成功',
				type: 'success'
			})
			userBatchDelHistroyapi()
		})
	})
}
userBatchDelHistroyapi()
</script>
